<template>
  <div class="w-full h-full editor-canvas">
    <div class="editor-canvas-inner">
      <AreaSelect @click="canvasClick" @area="selectArea">
        <GroupComponment
          v-for="(value, key) in config.config"
          :config="value"
          :id="key"
          :key="key"
          @context-menu-handle="openOperation"
        ></GroupComponment>
      </AreaSelect>
      <Operation v-bind="oper"></Operation>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import GroupComponment from "../GroupComponent/index.vue";
import AreaSelect from "../AreaSelect/index.vue";
import Operation from "@/components/viewEditor/Operation/index.vue";
import { useConfig } from "@/stores/datav/useConfig";
import { IConfigStore } from "@/stores/datav/types";
import {
  useKeyMoveComponent,
  useScreen,
} from "@/components/viewEditor/editor/hooks/screen";

export default defineComponent({
  components: {
    AreaSelect,
    GroupComponment,
    Operation,
  },
  setup() {
    const config: IConfigStore = useConfig();
    const { screenStyle, canvasClick, selectArea, openOperation, oper } =
      useScreen();
    //
    useKeyMoveComponent();

    return {
      screenStyle,
      config,
      canvasClick,
      selectArea,
      openOperation,
      oper,
    };
  },
});
</script>

<style lang="less" scoped>
//.editor-canvas {
//  overflow: hidden;
//}

.editor-canvas-inner {
  width: 100%;
  height: 100%;
  padding-bottom: 30px;
  padding-right: 30px;
  overflow: auto;
}
</style>
